import { IProduct } from '@/utils/types';
import { ProColumns } from '@ant-design/pro-components';
import { Image, Popconfirm } from 'antd';

interface IProps {
  onEditHandler: (id: string) => void
  onCardHandler: (id: string) => void
  onDeleteHandler: (id: string) => void
}

export const getColumns: ({
  onEditHandler,
  onCardHandler,
  onDeleteHandler,
}: IProps) => ProColumns<IProduct, 'text'>[] = ({
  onEditHandler,
  onCardHandler,
  onDeleteHandler,
}) => [
  {
    dataIndex: 'id',
    title: '#',
    valueType: 'indexBorder',
    search: false,
    align: 'center',
    width: 50,
  },
  {
    title: '封面',
    dataIndex: 'coverUrl',
    search: false,
    align: 'center',
    width: 100,
    render: (_, record: IProduct) => <Image src={record.coverUrl} />
  },
  {
    title: '商品名',
    dataIndex: 'name',
    copyable: true,
    ellipsis: true,
    formItemProps: {
      rules: [
        {
          required: true,
          message: '此项必填',
        }
      ]
    }
  },
  {
    title: '原价',
    dataIndex: 'originalPrice',
    width: 50,
    search: false,
  },
  {
    title: '优惠价',
    dataIndex: 'preferentialPrice',
    width: 70,
    search: false,
  },
  {
    title: '库存总数',
    dataIndex: 'stock',
    width: 80,
    search: false,
    align: 'center',
  },
  {
    title: '当前库存',
    dataIndex: 'curStock',
    width: 80,
    search: false,
    align: 'center',
  },
  {
    title: '每人限购',
    dataIndex: 'limitBuyNumber',
    width: 80,
    search: false,
    align: 'center',
  },
  {
    title: '销量',
    dataIndex: 'buyNumber',
    width: 50,
    search: false,
    align: 'center',
  },
  {
    title: '操作',
    valueType: 'option',
    dataIndex: 'id',
    align: 'center',
    width: 200,
    render: (text, entity) => [
      <a
        key="edit"
        type="link"
        onClick={() => onEditHandler(entity.id)}
      >
        编辑
      </a>,
      <a
        key="card"
        type="link"
        onClick={() => onCardHandler(entity.id)}
      >
        绑定消费卡
      </a>,
      <Popconfirm
        title="提醒"
        description="确认删除？"
        onConfirm={() => onDeleteHandler(entity.id)}
      >
        <a
          key="delete"
          type="link"
          style={{ color: 'red' }}
        >
          删除
        </a>
      </Popconfirm>
    ]
  },
];
